<template>
  <div class="upload-preview-container">
    <div class="upload-section">
      <el-upload class="upload-demo" :action="uploadUrl" list-type="picture-card" :on-change="handleChange"
        :file-list="fileList" :auto-upload="true" :on-success="uploadSuccess">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div class="preview-section">
      <img v-show="previewImage" :src="previewImage || ''" alt="Uploaded Image" class="preview-image" />
    </div>

    <carPark ref="carParkRef" />
  </div>
</template>

<script>
import { vehicleEnterParking } from "@/api/Approach";
import carPark from './carPark.vue'
export default {
  components: {
    carPark,
  },
  name: "Approach",
  data() {
    return {
      fileList: [],
      previewImage: "",
      uploadUrl: import.meta.env.VITE_APP_BASE_API
        ? `${import.meta.env.VITE_APP_BASE_API}/upload_image`
        : "/upload_image", // 确保 uploadUrl 始终为字符串
    };
  },
  methods: {
    handleChange(file) {
      if (file.raw) {
        // 清空文件列表并更新预览图片
        this.fileList = [file];
        this.previewImage = URL.createObjectURL(file.raw);
      }
    },
    async uploadSuccess(response, file) {
      console.log("文件上传成功", response, file);
      this.$refs.carParkRef.openCarParkDialog(response['plate_number']); // 调用子组件的方法
    },
  },
  created() {
  },
  mounted() {
    // 组件挂载后，打开停车场弹窗
  },
};
</script>

<style scoped>
.upload-preview-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  height: 100vh;
  /* 高度铺满全屏 */
  box-sizing: border-box;
}

.upload-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
}

.preview-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  padding: 20px;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
